<template>
  <div class="tv">
    <div class="tv-top">
      <div class="tv-info">
        <div class="tv-info-title">Check if the device is in <a style="cursor: pointer;" @click="clickLink">MSPbots Device List</a> to stream dashboard to another device.</div>
        <div class="if">IF YES</div>
        <div>Select and click "Stream". Open <a :href="tvDomain" target="_blank">tv.mspbots.ai</a> on the device to view.</div>
        <div class="if">IF NOT</div>
        <div>Open <a :href="tvDomain" target="_blank">tv.mspbots.ai</a> and follow the prompts to complete the device binding.</div>
      </div>
      <div class="tv-img">
        <img :src="tv" alt="">
<!--        <i class="el-icon-data-line"></i>-->
      </div>
    </div>
    <p>Device</p>
    <div class='tvCode'>
      <el-select v-model="value" style="width: 100%" size="small" multiple filterable>
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.deviceName"
            :value="item.deviceCode">
        </el-option>
      </el-select>
    </div>
    <div style="color: #00000073; font-size: 12px;margin-top: 8px">After clicking 'Stream', the selected device will be able to view this dashboard.</div>
    <div style='height:22px'></div>
    <el-button type="primary" size="mini" @click="shareToDevice">Stream</el-button>
    <el-button type="text"  @click="close">Cancel</el-button>
  </div>
</template>

<script>
import tv from '@/assets/img/tv.png'
import config from '@/utils/config'
export default {
  name: "stream-to-device",
  props: ['formId'],
  data () {
    return {
      tvDomain: config.tvDomain,
      tv,
      value: [],
      options: [],
    }
  },
  methods: {
    async getDeviceManageListAll () {
      const { getDeviceManageListAll } = this.$interface.reports
      const { data } = await getDeviceManageListAll()
      this.options = data.data.records
    },
    async shareToDevice () {
      if (this.value.length === 0) {
        this.$message.warning('Please select device')
        return false
      }
      const params = this.value.map(item => {
        return {businessId: this.formId, deviceCode: item}
      })
      const { shareToDevice } = this.$interface.reports
      const { data } = await shareToDevice(params)
      if (data.code === 0) {
        this.$message.success('Share Success')
      } else {
        this.$message.error(data.msg)
      }
      this.close()
    },
    close () {
      this.$emit('update:dialogVisible', false)
    },
    clickLink(){
      this.close()
      this.$router.push('/DeviceManage')
    }
  },
  created () {
    // this.getDeviceManageListAll()
  }
}
</script>

<style scoped lang="scss">
.tv {
  .tv-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }
  .tv-info div {
    margin-bottom: 8px;
    line-height: 20px;
  }
  .tv-img i {
    font-size: 150px;
  }
  .tv-info-title {
    color: #000000E5;
  }
  .if {
    color: #00000073;
  }
  a {
    color: #0265DCFF;
  }
}
</style>